<template>
    <div class="mainTop-wrap">
        <slot name="topTit"></slot>
        <div>
            <div class="top-wrap-list" v-for="(item,index) in getSearchData" @click="details(item.id)">
                <span class="tops" v-show="showIndex"><i>{{index+1}}</i></span>
                <!-- <img :src="item.image" alt=""> -->
                <el-image class="img" :src="item.image" lazy></el-image>
                <div class="top-wrap-list-d">
                    <span>{{item.title1}}</span>
                    <span>区域：{{item.diqu}}</span>
                    <span>上映时间：{{item.timer}}</span>
                </div>
                <span class="top-sp">{{item.num}}分</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['getSearchData'],
    name: 'Listmain',
    data() {
        return {
            showIndex:true
        };
    },
    mounted() {
        
    },
    methods: {
        details(id){
            this.$router.push('/movie/detail?id='+id)
        }
    },
};
</script>

<style lang="scss" scoped>
    .mainTop-wrap{
        margin: 0 auto;
        width: 950px;
        min-height: 500px;
        p{
            color: rgb(155, 153, 153);
            font-size: 12px;
            text-align: center;
            padding: 50px;
        }
        .top-wrap-list{
            display: flex;
            justify-content: start;
            align-items: center;
            width: 950px;
            height: 220px;
            margin: 20px 0;
            position: relative;
            cursor: pointer;
            .tops{
                text-align: center;
                line-height: 50px;
                width: 50px;
                height: 50px;
                display: block;
                color: rgb(255, 176, 6);
                font-size: 50px;
            }
            .top-sp{
                color: rgb(253, 167, 7);
                font-size: 40px;
                position: absolute;
                right: 0;
            }
            }
            .img{
                width: 160px;
                height: 220px;
                margin: 0 30px;
            }
            .top-wrap-list-d{
                display: flex;
                flex-direction: column;
                span:nth-child(1){
                    margin: 10px;
                    font-size: 26px;
                }
                span:nth-child(2){
                    margin: 10px;
                }
                span:nth-child(3){
                    margin: 10px;
                    color: #afaaa9;
                }
            }
        }
</style>